<template>
  <div class="company-style">
    <!-- 导航栏 start -->
    <van-nav-bar title="新用户注册" left-arrow fixed @click-left="$router.back()" />
    <!-- 导航栏 end -->

    <!-- 内容 -->
    <div class="user">
      <van-form @submit="onSubmit" class="form">
        <van-field v-model="postData.companyName" size="large" name="企业名称" placeholder="请输入公司名称" :rules="[{ required: true, message: '请填写企业名称' }]" style="margin-top: 25px; font-size: 16px" />
        <van-field v-model="postData.username" size="large" name="用户名" placeholder="请输入用户名" :rules="[{ required: true, message: '请填写用户名' }]" style="font-size: 16px" />
        <van-field v-model="postData.password" size="large" type="password" placeholder='请输入密码' name="密码" :rules="[{ required: true, message: '请填写密码' }]" style="font-size: 16px" />
        <van-field v-model="postData.password2" size="large" type="password" name="密码" placeholder="请确认密码" :rules="[{ required: true, message: '请填写密码' }]" style="font-size: 16px" />

        <van-field v-model="postData.linkman" size="large" name="联系人" placeholder="请输入联系人" :rules="[{ required: true, message: '请填写联系人' }]" style="font-size: 16px" />
        <van-field v-model="postData.linkTel" size="large" name="手机号" placeholder="请输入手机号" :rules="[{ required: true, message: '请填写手机号' }]" style="font-size: 16px" />
        <van-field v-model="vcode" center clearable placeholder="请输入验证码" style="font-size: 16px">
          <template #button>
            <van-button size="small" type="primary" class="yzm" native-type="button" :disabled="codeBtnEnabel" :loading="yzmLoading" @click="onYzm">{{codeBtnTitle}}</van-button>
          </template>
        </van-field>
        <van-field name="checkbox" class="read">
          <template #input>
            <van-checkbox v-model="checked" checked-color="#07f" icon-size="16px">
              <span>我同意</span>
            </van-checkbox>
						<span @click="onUserXY('xy')">《舟山人才网用户协议》</span>
            <span @click="onUserXY('zc')">《隐私政策》</span>
          </template>
        </van-field>
        <div class="btns">
          <van-button round block type="info" native-type="submit" :loading="subLoading">立即注册</van-button>
          <b @click="toCall('0580-2186550')">客服热线：0580-2186550</b>
        </div>

      </van-form>
    </div>
  </div>
</template>

<script>
import { NavBar, Form, Field, Button, Checkbox, CheckboxGroup, Toast } from "vant";
import { returnToPhoneWithData } from '@/util/phone';
export default {
  name: "LoginPage",
  components: {
    [NavBar.name]: NavBar,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
  },
  // 定义属性
  data() {
    return {
      postData: {
        username: '',
        password: '',
        password2: '',
        companyName: '',
        linkman: '',
        linkTel: '',
        mobileNum: '',
      },
      vcode: '',
      checked: false,
      yzmLoading: false,
      subLoading: false,
      codeBtnTitle: '获取验证码',
      codeBtnEnabel: false,
    };
  },
  // 方法集合
  methods: {
    onSubmit() {
      if (!this.checked) { Toast('请同意用户协议'); return; }
      if (this.postData.password != this.postData.password2) { Toast('两次密码输入不一致'); return; }
      // this.subLoading = true;
      this.$api.post(`/CompanyAccount/Register?vcode=${this.vcode}`, this.postData).then(res => {
        this.subLoading = false;
        Toast(res.msg);
        if (res.success) {
          this.$router.back();
        }
      })
    },
    onYzm() {
      this.yzmLoading = true;
      this.$api.get("/CompanyAccount/SendPhoneCode", { mobileNum: this.postData.linkTel }).then((res) => {
        this.yzmLoading = false;
        Toast(res.msg);
        if (res.success) {
          this.getYZMSuccess();
        }
      });
    },
    //验证码倒计时
    getYZMSuccess() {
      let count = 60;
      let timmer = setInterval(() => {
        this.codeBtnTitle = `${count}s`;
        this.codeBtnEnabel = true;
        count--;
        if (count < 0) {
          this.codeBtnTitle = "获取验证码";
          this.codeBtnEnabel = false;
          clearInterval(timmer);
        }
      }, 1000);
    },
    //协议
    onUserXY(type) {
      this.$router.push({ name: "person-login-xy", query: { type } });
    },
		toCall(phone){
			returnToPhoneWithData({action:'call',tel:phone})
		}
  },
};
</script>

<style lang="less">
@import "vant/lib/index.less";
@import "@/assets/css/company.less";
@import "@/assets/css/company.css";
</style>